<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GEP调节服务数据可视化平台</title>
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 20px;
            background-color: #f8f9fa;
            color: #333;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        h1 {
            color: #1a73e8;
            margin-bottom: 30px;
        }
        h2 {
            color: #4285f4;
            border-bottom: 2px solid #e8eaed;
            padding-bottom: 10px;
            margin-top: 30px;
            text-align: left;
        }
        nav {
            margin-bottom: 30px;
            background: #1a73e8;
            padding: 15px;
            border-radius: 8px;
        }
        nav a {
            margin: 15px 15px;
            text-decoration: none;
            color: white;
            font-weight: bold;
            font-size: 16px;
            padding: 8px 15px;
            border-radius: 5px;
            transition: background 0.3s;
        }
        nav a:hover {
            background: rgba(255,255,255,0.2);
            text-decoration: none;
        }
        .feature-card {
            background: #f1f8ff;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            text-align: left;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
        }
        .feature-card h3 {
            color: #1a73e8;
            margin-top: 0;
        }
        .download-section {
            background: #e8f0fe;
            padding: 25px;
            border-radius: 10px;
            margin: 30px 0;
        }
        .download-btn {
            display: inline-block;
            background: #1a73e8;
            color: white;
            padding: 12px 25px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            margin: 15px 0;
            transition: background 0.3s;
        }
        .download-btn:hover {
            background: #0d62d9;
        }
        table {
            width: 100%;
            margin: 20px auto;
            border-collapse: collapse;
            text-align: center;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
        }
        th {
            background-color: #4285f4;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        .instructions {
            text-align: left;
            margin: 20px 0;
            line-height: 1.6;
        }
        .instructions li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GEP调节服务数据可视化平台</h1>

        <nav>
            <a href="index.html">首页</a>
            <a href="./html/calculate_service_percentage.html">计算调节服务占比</a>
            <a href="./html/pie_service_percentage.html">核算地区调节服务占比可视化</a>
            <br/>
            <a href="./html/single_service.html">单项调节各地区占比</a>
            <a href="./html/adjust_service_value.html">调整气候调节服务项的价值量</a>
            <a href="./html/multi_service.html">多项调节服务可视化</a>
        </nav>

        <div class="instructions">
            <h2>平台使用说明</h2>
            <p>欢迎使用GEP调节服务数据可视化平台！本平台提供多种数据分析和可视化功能，帮助您深入了解生态系统调节服务的分布和价值。</p>
            <p>使用流程：</p>
            <ol>
                <li><strong>下载示例数据</strong>：获取符合模板要求的Excel数据文件</li>
                <li><strong>选择功能页面</strong>：使用顶部导航栏访问不同功能</li>
                <li><strong>上传数据</strong>：在各功能页面使用文件选择器上传Excel文件</li>
                <li><strong>查看结果</strong>：系统将自动处理数据并生成可视化图表</li>
                <li><strong>交互操作</strong>：在图表上进行选择、缩放、下载等操作</li>
            </ol>
        </div>

        <div class="download-section">
            <h2>示例数据下载</h2>
            <p>下载示例Excel文件，用于在各功能页面上传测试：</p>
            <a href="./excel/GEP调节服务数据示例.xlsx" download class="download-btn">
                下载示例Excel文件
            </a>
            <p>文件包含模拟数据，符合系统要求的字段格式，可直接用于测试各功能页面。</p>
        </div>

        <h2>功能页面介绍</h2>

        <div class="feature-card">
            <h3>计算调节服务占比</h3>
            <p>上传原始数据文件，系统自动计算各调节服务项在总价值中的占比。主要功能：</p>
            <ul>
                <li>自动识别并计算各调节服务项的价值占比</li>
                <li>生成详细的数据表格展示计算结果</li>
                <li>支持导出计算结果为Excel文件</li>
            </ul>
        </div>

        <div class="feature-card">
            <h3>核算地区调节服务占比可视化</h3>
            <p>以饼图形式展示特定地区的各调节服务项占比分布。主要功能：</p>
            <ul>
                <li>选择特定地区查看其调节服务项占比</li>
                <li>交互式饼图展示各项服务占比</li>
                <li>图表悬停显示详细数值</li>
                <li>支持下载图表为图片</li>
            </ul>
        </div>

        <div class="feature-card">
            <h3>单项调节各地区占比</h3>
            <p>分析特定调节服务项在各地区的分布情况。主要功能：</p>
            <ul>
                <li>选择特定调节服务项（如气候调节、水源涵养等）</li>
                <li>地图可视化展示该服务项在各地区的分布</li>
                <li>支持地区间比较分析</li>
                <li>图表缩放和平移功能</li>
            </ul>
        </div>

        <div class="feature-card">
            <h3>调整气候调节服务项的价值量</h3>
            <p>模拟调整气候调节服务项的价格参数，分析其对价值量的影响。主要功能：</p>
            <ul>
                <li>动态调整气候调节服务项的价格参数</li>
                <li>实时计算并展示价值量变化</li>
                <li>可视化展示调整前后的对比</li>
                <li>生成敏感性分析报告</li>
            </ul>
        </div>

        <div class="feature-card">
            <h3>多项调节服务可视化</h3>
            <p>同时展示多个调节服务项在全国各地区的分布情况。主要功能：</p>
            <ul>
                <li>多图层地图展示不同调节服务项</li>
                <li>支持同时显示实物量、价值量和占比数据</li>
                <li>图表全屏、缩放和下载功能</li>
                <li>交互式图例控制各服务项的显示/隐藏</li>
            </ul>
        </div>

        <h2>数据表格字段模板</h2>
        <table id="dataTable">
            <thead>
                <tr>
                    <th>行政区划代码</th>
                    <th>核算地区</th>
                    <th>面积（km²）</th>
                    <th>调节服务项</th>
                    <th>生态系统</th>
                    <th>实物量总值（t）</th>
                    <th>价格（元/t）</th>
                    <th>价值量总值（元）</th>
                    <th>调节服务项占比（%）</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>110000</td>
                    <td>北京市</td>
                    <td>16410</td>
                    <td>气候调节</td>
                    <td>森林</td>
                    <td>10000</td>
                    <td>10</td>
                    <td>100000</td>
                    <td>20.5</td>
                </tr>
                <tr>
                    <td>110000</td>
                    <td>北京市</td>
                    <td>16410</td>
                    <td>水源涵养</td>
                    <td>湿地</td>
                    <td>8000</td>
                    <td>15</td>
                   极端的 <td>120000</td>
                    <td>24.6</td>
                </tr>
                <tr>
                    <td>310000</td>
                    <td>上海市</td>
                    <td>6340</td>
                    <td>气候调节</td>
                    <td>城市绿地</td>
                    <td>7500</td>
                    <td>12</td>
                    <td>90000</td>
                    <td>18.4</td>
                </tr>
            </tbody>
        </table>

        <div class="instructions">
            <h2>数据要求</h2>
            <ul>
                <li>使用Excel格式文件（.xlsx或.xls）</li>
                <li>数据表必须包含上述所有字段</li>
                <li>第一行应为字段名称行</li>
                <li>数值字段应使用数字格式，避免文本格式</li>
                <li>确保数据完整，无空值</li>
            </ul>
        </div>
    </div>
</body>
</html>
